<template>
	<view class="u-wrap u-p-l-20 u-p-r-20">
		<u-form :model="addModel" ref="form1">
			<u-form-item prop="name" label="类型:">
				<u-radio-group v-model="addModel.name">
					<u-radio @change="radioChange" activeColor="#FF7670" v-for="
(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item prop="goodsName" label="名称:">
				<u-input placeholder="请输入名称" v-model="addModel.goodsName" />
			</u-form-item>
			<u-form-item prop="categoryName" label="分类:">
				<u-input @click="openSelect" placeholder="请选择分类" v-model="addModel.categoryName" />
				<u-select @confirm="selectConfirm" v-model="show" :list="selectList"></u-select>
			</u-form-item>
			<u-form-item prop="goodsDesc" label="简介:">
				<u-input placeholder="请输入简介" v-model="addModel.goodsDesc" />
			</u-form-item>
			<u-form-item prop="goodsPrice" label="价格:">
				<u-input placeholder="请输入价格" v-model="addModel.goodsPrice" />
			</u-form-item>
			<u-form-item prop="userName" label-width="auto" label="联系人:">
				<u-input placeholder="请输入联系人" v-model="addModel.userName" />
			</u-form-item>
			<u-form-item prop="phone" label-width="auto" label="联系电话:">
				<u-input placeholder="请输入联系电话" v-model="addModel.phone" />
			</u-form-item>
			<u-form-item prop="wxNum" label-width="auto" label="微信号:">
				<u-input placeholder="请输入微信号" v-model="addModel.wxNum" />
			</u-form-item>
			<u-form-item prop="address" label-width="auto" label="联系地址:">
				<u-input v-model="addModel.address" />
			</u-form-item>
			<u-form-item prop="image" label="图片:"></u-form-item>
			<u-upload @on-remove="onRemove" @on-change="onChange" :action="action" :auto-upload="true"></u-upload>
		</u-form>
		<u-button @click="commit" :custom-style="customStyle">发布</u-button>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app'
	import http from '../../common/index.js'
	import {
		categoryApi,
		releaseApi
	} from '../../api/good.js'
	//表单ref属性
	const form1 = ref()
	const addModel = reactive({
		userId: uni.getStorageSync('userId'),
		name: '',
		type: '',
		goodsName: '',
		categoryId: '',
		categoryName: '',
		goodsDesc: '',
		goodsPrice: '',
		userName: '',
		phone: '',
		wxNum: '',
		image: '',
		address: ''
	})
	const list = [{
			value: '0',
			name: '闲置',
			disabled: false
		},
		{
			value: '1',
			name: '求购',
			disabled: false
		}
	]
	const rules = reactive({
		name: [{
			required: true,
			message: '请选择类型',
			trigger: ['change', 'blur'],
		}],
		goodsName: [{
			required: true,
			message: '请填写名称',
			trigger: ['change', 'blur'],
		}],
		goodsDesc: [{
			required: true,
			message: '请填写描述',
			trigger: ['change', 'blur'],
		}],
		goodsPrice: [{
			required: true,
			message: '请填写价格',
			trigger: ['change', 'blur'],
		}],
		userName: [{
			required: true,
			message: '请填写姓名',
			trigger: ['change', 'blur'],
		}],
		phone: [{
			required: true,
			message: '请填写电话',
			trigger: ['change', 'blur'],
		}],
		wxNum: [{
			required: true,
			message: '请填写微信号',
			trigger: ['change', 'blur'],
		}],
		address: [{
			required: true,
			message: '请填写发布/求购地址',
			trigger: ['change', 'blur'],
		}]
	})
	const value = ref('')
	const fileList = ref([])
	const customStyle = reactive({
		background: '#FF7670',
		color: '#FFF',
		marginTop: '50px',
		width: '100%'
	})
	//图片上传路径
	const action = ref(http.baseUrl + "/api/upload/uploadImage")
	//存储图片路径
	 const imgUrl = ref([])
	//图片上传触发
	//图片上传触发
	 const onChange = (res, index, lists, name) => {
		 console.log(res)
	      if (res.data) {
	          try {
	              let result = JSON.parse(res.data);
	              if (result.data) {
	                  imgUrl.value.push(http.baseUrl + result.data);
	                // 使用数组的join方法将图片路径拼接为逗号分隔的字符串
	                 addModel.image = imgUrl.value.join(',');
	                  console.log(addModel);
	              } else {
	                 console.error('Invalid data format in the response');
	              }
	         } catch (error) {
	             console.error('Error parsing JSON data:', error);
          }
	      } else {
	          console.error('Empty data received');
	      }
	  }


	//删除图片
	const onRemove = (index) => {
		//删除图片 imgUrl.value.splice(index, 1)
		let url = ''
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//去掉末尾的逗号
		addModel.image = url.substring(0, url.lastIndexOf(','))
		console.log(addModel)
	}
	//分类
	const show = ref(false)
	//分类数据
	const selectList = ref([])
	const getSelectList = async () => {
		let res = await categoryApi()
		if (res && res.code == 200) {
			console.log(res)
			selectList.value = res.data;
		}
	}
	//打开分类
	const openSelect = () => {
		show.value = true;
	}
	//分类确定
	const selectConfirm = (e) => {
		console.log(e)
		addModel.categoryName = e[0].label;
		addModel.categoryId = e[0].value;
	}
	//发布提交
	// const commit = () => {
	// 	form1.value.validate(async (valid) => {
	// 		console.log(valid)
	// 		if (valid) {
	// 			let res = await releaseApi(addModel)
	// 			if (res && res.code == 200) {
	// 				console.log(res)
	// 				uni.switchTab({
	// 					url: '../index/index',
	// 			}
	// 		}
	// 	})
	// 	console.log(addModel)
	// 	})
	// }
	// 发布提交
	// 发布提交
	const commit = () => {
		form1.value.validate(async (valid) => {
			console.log(valid);
			if (valid) {
				let res = await releaseApi(addModel);
				if (res && res.code === 200) {
					console.log(res);
					// 发布成功后清空输入框内容
					uni.switchTab({
						url: '../index/index'
					});
				}
			}
		});
		console.log(addModel);
	};


	//类型点击事件
	const radioChange = (e) => {
		console.log(e)
		for (let i = 0; i < list.length; i++) {
			if (list[i].name == e) {
				addModel.type = list[i].value;
			}
		}
	}
	onReady(() => {
		//设置表单验证规则
		form1.value.setRules(rules);
		//获取分类数据
		getSelectList()
	})
</script>
<style>
</style>